<template>
  <view class="work-container">
    <view class="header">
      <text class="title">工作台</text>
      <text class="welcome">您好，{{ userName }}</text>
    </view>

    <!-- 主要功能区 -->
    <view class="section">
      <text class="section-title">仓库管理系统</text>
      <view class="grid">
        <view 
          class="grid-item" 
          v-for="(item, index) in gridList" 
          :key="index"
          @click="handleGridClick(item)"
        >
          <view class="icon-box" :style="{ background: item.color }">
            <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
          </view>
          <text class="item-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 快捷功能区 -->
<!--    <view class="section">-->
<!--      <text class="section-title">快捷功能</text>-->
<!--      <view class="grid">-->
<!--        <view -->
<!--          class="grid-item" -->
<!--          v-for="(item, index) in quickFunctions" -->
<!--          :key="index"-->
<!--          @click="handleQuickFunction(item)"-->
<!--        >-->
<!--          <view class="icon-box" :style="{ background: item.color }">-->
<!--            <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>-->
<!--          </view>-->
<!--          <text class="item-text">{{ item.text }}</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: "管理员",
      gridList: [
        {
          text: '库存查询',
          icon: 'search',
          color: '#4A90E2',
          url: '/pages/stock/index'
        },
        {
          text: '区域选择',
          icon: 'compose',
          color: '#4A90E2',
          url: '/pages/area/index'
        },

        {
          text: 'KTL入库',
          icon: 'notification',
          color: '#4A90E2',
          url: '/pages/KTLInbound/index'
        },

        {
          text: '盘点',
          icon: 'camera',
          color: '#4A90E2',
          url: '/pages/inventory_counting/index'
        },
        {
          text: '空托处理',
          icon: 'minus', // 使用一个表示“空”的图标，您可以根据需要更改
          color: '#4A90E2', // 使用与仓库管理系统其他功能相同的颜色
          url: '/pages/empty_pallet/index'
        },
        {
          text: '搬运任务',
          icon: 'checkmarkempty',
          color: '#4A90E2',
          url: '/pages/HandlingTasks/index'
        },
        {
          text: '人工作业',
          icon: 'compose',
          color: '#4A90E2',
          url: '/pages/ManualWork/index'
        },

        {
          text: '人工合托',
          icon: 'reload',
          color: '#4A90E2',
          url: '/pages/HJTasks/index'
        },
		// {
		//   // text: '手动任务',
    //   text: '人工作业',
		//   icon: 'compose',
		//   color: '#4A90E2',
		//   url: '/pages/ManualTask/index'
		// },
        {
          text: '立库入库',
          icon: 'download',
          color: '#4A90E2',
          url: '/pages/inbound/index'
        },
        {
          text: '合托要货',
          icon: 'upload',
          color: '#4A90E2',
          url: '/pages/outbound/index'
        },
		{
		  text: '空箱返回',
		  icon: 'compose',
		  color: '#4A90E2',
		  url: '/pages/EmptyContainers/index'
		},


		{
		  text: '母器具入库',
		  icon: 'calendar',
		  color: '#4A90E2',
		  url: '/pages/MotherUtensils/index'
		},
        {
          text: '手工任务',
          icon: 'gear',
          color: '#4A90E2',
          url: '/pages/SGTask/index'
        },

        // {
        //   text: '空拖盘管理',
        //   icon: 'reload',
        //   color: '#4A90E2',
        //   url: '/pages/EmptyPalletManagement/index'
        // },
        // {
        //   text: '包材管理',
        //   icon: 'gear',
        //   color: '#4A90E2',
        //   url: '/pages/PackageMaterialManagement/index'
        // },
        // {
        //   text: '下架缓存区绑定',
        //   icon: 'gear',
        //   color: '#4A90E2',
        //   url: '/pages/PalletBd/index'
        // },
        // {
        //   text: '上架缓存区解绑',
        //   icon: 'gear',
        //   color: '#4A90E2',
        //   url: '/pages/PalletJb/index'
        // }



        {
          text: '立体库返回',
          icon: 'compose',
          color: '#4A90E2',
          url: '/pages/LTback/index'
        },
		// {
		//   text: '人工上架',
		//   icon: 'compose',
		//   color: '#4A90E2',
		//   url: '/pages/ManualWork/ManualShelving/index'
		// },
		// {
		//   text: '人工下架',
		//   icon: 'compose',
		//   color: '#4A90E2',
		//   url: '/pages/ManualWork/ManualDelisting/index'
		// }
      ],
    //   quickFunctions: [
    //     {
    //       text: '扫码入库',
    //       icon: 'camera',
    //       color: '#666666'
    //     },
    //     {
    //       text: '一键盘点',
    //       icon: 'checkmarkempty',
    //       color: '#666666'
    //     },
    //     {
    //       text: '库存预警',
    //       icon: 'notification',
    //       color: '#666666'
    //     },
    //     {
    //       text: '任务管理',
    //       icon: 'calendar',
    //       color: '#666666',
    //       url: '/pages/task/index'
    //     }
    //   ]
    }
  },
  methods: {
    handleGridClick(item) {
      if (item.url) {
        this.$tab.navigateTo(item.url)
      } else {
        this.$modal.showToast('功能建设中~')
      }
    },
    handleQuickFunction(item) {
      if (item.url) {
        this.$tab.navigateTo(item.url)
      } else {
        this.$modal.showToast('功能建设中~')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.work-container {
  min-height: 100vh;
  padding: 20px 16px;
}

.header {
  margin-bottom: 24px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 4px;
  }

  .welcome {
    font-size: 14px;
    color: #999;
  }
}

.section {
  margin-bottom: 24px;

  .section-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    font-weight: 500;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  .grid-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    background: #f8f9fa;

    .icon-box {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .item-text {
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
  }
}
</style>
